<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <title>首页</title>

    <link rel="stylesheet" href="/mobile-lib/OnsenUI/css/onsenui-core.min.css">
    <link rel="stylesheet" href="/mobile-lib/OnsenUI/css/onsen-css-components.min.css">
    <link rel="stylesheet" href="/mobile-lib/OnsenUI/css/material-design-iconic-font/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="/mobile-sys/css/common.css">
    <link rel="stylesheet" href="/mobile-sys/css/tabbar-tit-icon.css">
    <link rel="stylesheet" href="/mobile-sys/css/main-buy.css">
    <link rel="stylesheet" href="/mobile-sys/css/toolbar-list.css">
    <link rel="stylesheet" href="/mobile-lib/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/mobile-lib/loaders/loaders.min.css">
</head>

<body>

    <ons-navigator swipeable id="nav-bar" var="myNav">
        <ons-page id="main-page">
            <ons-tabbar class="bottom-tabbar" id="main-tabbar" >
                <ons-tab id="home"              page="homepage.html"      label="首页"    icon="md-home" active></ons-tab>
                <ons-tab id="all-orders"        page="all-orders.html"    label="全部任务" icon="md-view-headline"></ons-tab>
                <ons-tab id="order-detail-tab"  page="order-detail.html"  label="订单详情" icon="md-truck"></ons-tab>
                <ons-tab id="my-account"        page="my-account.html"    label="我的账户" icon="md-card"></ons-tab>
                <ons-tab id="me"                page="me.html"            label="我"      icon="md-account"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </ons-navigator>

    <template id="homepage.html">
            <ons-page id="homepage">
                <ons-toolbar>'
                    <div class="center">首页</div>
                </ons-toolbar>
                <ons-fab class="to-top-btn share-btn" position="bottom right">💰</ons-fab>
            </ons-page>
    </template>

    <template id="all-orders.html">
        <ons-page id="all-orders">
            <ons-toolbar>
                    <div class="center">全部任务</div>
            </ons-toolbar>
            <ons-tabbar class="top-tabbar" position="top" tab-border>
                <ons-tab page="ll-order.html" label="浏览任务" active></ons-tab>
                <ons-tab page="df-order.html" label="垫付任务"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>

    <template id="my-account.html">
        <ons-page id="my-account">
            <ons-toolbar>
                <div class="center">我的账户</div>
            </ons-toolbar>
            <ons-tabbar  id="ac-topbar" class="top-tabbar" position="top" tab-border>
                <ons-tab page="/mobile-views/_account/balance-record.html"    class="balance-record" label="本金" active></ons-tab>
                <ons-tab page="/mobile-views/_account/servicefee-record.html" class="servicefee" label="佣金"></ons-tab>
                <ons-tab page="/mobile-views/_account/spread-record.html"     class="spread" label="推广赚金"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>

    <template id="order-detail.html">
        <ons-page id="order-detail">
            <ons-toolbar>
                <div class="center">订单详情</div>
            </ons-toolbar>
            <ons-tabbar class="top-tabbar" id="list-tabbar" position="top" tab-border>
                <ons-tab page="/mobile-views/_detail/ac-operate.html" id="ac-operate"  label="待操作" active></ons-tab>
                <ons-tab page="/mobile-views/_detail/ac-deliver.html" id="ac-deliver"  label="待发货"></ons-tab>
                <ons-tab page="/mobile-views/_detail/ac-comment.html" id="ac-comment"  label="待评价"></ons-tab>
                <ons-tab page="/mobile-views/_detail/ac-check.html"   id="ac-check"    label="待审核"></ons-tab>
                <ons-tab page="/mobile-views/_detail/ac-complete.html"id="ac-complete" label="已完成"></ons-tab>
                <ons-tab page="/mobile-views/_detail/ac-all.html"     id="ac-all"      label="所有"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>

    <template id="ll-order.html">
        <ons-page id="ll-order">
            <ons-card id="ll-tb-btn">
                <div class="logo">
                    <img src="/img/tb-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">淘宝</div>
            </ons-card>

            <ons-card id="ll-jd-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/jd-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">京东 (敬请期待)</div>
            </ons-card>

            <ons-card id="ll-pdd-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/pdd-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">拼多多 (敬请期待)</div>
            </ons-card>
            <ons-card id="ll-qt-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/logo.png" alt="tb-logo">
                </div>
                <div class="card-title">其他平台 (敬请期待)</div>
            </ons-card>
        </ons-page>
    </template>

    <template id="df-order.html">
        <ons-page id="df-order">
            <ons-card id="df-tb-btn">
                <div class="logo">
                    <img src="/img/tb-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">淘宝</div>
            </ons-card>
            <ons-card id="df-jd-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/jd-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">京东 (敬请期待)</div>
            </ons-card>
            <ons-card id="df-pdd-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/pdd-logo.png" alt="tb-logo">
                </div>
                <div class="card-title">拼多多 (敬请期待)</div>
            </ons-card>
            <ons-card id="df-qt-btn" style="opacity: 0.33; color:#999">
                <div class="logo">
                    <img src="/img/logo.png" alt="tb-logo">
                </div>
                <div class="card-title">其他平台 (敬请期待)</div>
            </ons-card>
        </ons-page>
    </template>

    <template id="me.html">
        <ons-page id="me">
            <ons-card class="t-me-card">
                <ons-icon icon="md-account-o" class="list-item__icon"></ons-icon>
                <div class="name" id="user-name">请绑定</div>
                <div class="slogan">欢迎使用金手指 !</div>
            </ons-card>

            <div id="money-flex">
                <ons-card>
                    <div class="money-tit">总金额(元)</div>
                    <div class="money-num" id="all">0.0</div>
                </ons-card>
                <ons-card>
                    <div class="money-tit">本金总额(元)</div>
                    <div class="money-num" id="balance">0.0</div>
                </ons-card>
                <ons-card>
                    <div class="money-tit">佣金总额(元)</div>
                    <div class="money-num" id="servicefee">0.0</div>
                </ons-card>
            </div>

            <ons-list id="list-1">
                <ons-list-item modifier="longdivider" id="vip-list-it">
                    <div class="left">
                        <ons-icon fixed-width icon="md-hourglass-alt" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center" id="vip-center">暂未开通会员服务</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="myOrders" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-storage" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">我的订单</div>
                </ons-list-item>
                <ons-tabbar class="tabbar-tit-icon">
                    <ons-tab label="待操作" class="list-btn" id="0" icon="md-calendar-check"></ons-tab>
                    <ons-tab label="待发货" class="list-btn" id="1" icon="md-truck"></ons-tab>
                    <ons-tab label="待评价" class="list-btn" id="2" icon="md-comment-list"></ons-tab>
                    <ons-tab label="待审核" class="list-btn" id="3" icon="md-search-replace"></ons-tab>
                    <ons-tab label="已完成" class="list-btn" id="4" icon="md-inbox"></ons-tab>
                </ons-tabbar>
            </ons-list>

            <ons-list id="list-2">
                <ons-list-header>我的账户</ons-list-header>
                <ons-list-item modifier="chevron" id="appeal" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-notifications" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">申诉管理</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="vip-pay" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-star-half" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">我的VIP</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="share" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-share" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">推广赚金</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="withdraw" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-money-box" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">资金提现</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="change-pwd" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-lock-open" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">修改密码</div>
                </ons-list-item>
            </ons-list>

            <ons-list id="list-3">
                <ons-list-header>绑定信息</ons-list-header>
                <ons-list-item modifier="chevron" id="update-buyer" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-account-box-o" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">个人信息</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="real-name" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-case-check" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">实名认证</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="bind-bank" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-card" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">绑定银行卡</div>
                </ons-list-item>
                <ons-list-item modifier="chevron" id="bind-tb" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-taobao" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">绑定淘宝</div>
                </ons-list-item>
            </ons-list>

            <ons-list id="list-4">
                <ons-list-header>其他</ons-list-header>
                <ons-list-item expandable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-phone-in-talk" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">联系客服</div>
                    <div class="expandable-content qq-expand">

                        <div class="qq-cnt">
                            <ons-button class="copyQQ-a copyQQ">
                                <img src="/img/qq-icon.png">
                                <span>2939085757 (复制)</span>
                            </ons-button>
                            <ons-button class="copyQQ-b copyQQ">
                                <img src="/img/qq-icon.png">
                                <span>3173700944 (复制)</span>
                            </ons-button>
                        </div>

                    </div>
                </ons-list-item>

                <ons-list-item modifier="chevron" id="new-guide" tappable>
                    <div class="left">
                        <ons-icon fixed-width icon="md-help" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">新手教学</div>
                </ons-list-item>

            </ons-list>

            <div id="btn-cnt">
                <ons-button id="logout-btn">退出登录</ons-button>
            </div>

        </ons-page>
    </template>

    <script src="/mobile-lib/jquery/jquery.min.js"></script>
    <script src="/mobile-lib/OnsenUI/js/onsenui.min.js"></script>
    <script src="/mobile-lib/jquery/jquery.cookie.js"></script>
    <script src="/mobile-lib/jsrender/jsrender.min.js"></script>
    <script src="/mobile-lib/moment/moment.min.js"></script>
    <script src="/mobile-lib/qrcode/jquery.qrcode.min.js"></script>
    <script src="/mobile-lib/clipboard/clipboard.min.js"></script>
    <script src="/mobile-lib/distpicker/distpicker.js"></script>

    <script src="/mobile-sys/js/common.js"></script>

    <script src="/mobile-sys/js/mobile-bridge.js"></script>
    <script src="/mobile-sys/js/main.js"></script>
    <script src="/mobile-sys/js/update-pwd.js"></script>
    <script src="/mobile-sys/js/notice-manage.js"></script>

    <script src="/mobile-sys/js/buy/appeal.js"></script>
    <script src="/mobile-sys/js/buy/load-orders.js"></script>
    <script src="/mobile-sys/js/buy/share.js"></script>
    <script src="/mobile-sys/js/buy/me-list.js"></script>
    <script src="/mobile-sys/js/buy/real-name.js"></script>
    <script src="/mobile-sys/js/buy/orders-detail.js"></script>
</body>

</html>